﻿@{
    ViewData["Title"] = "配置项";
    ViewBag.nav = "config";
}

@section styles{

    <style>
        textarea.txtValue {
            height: 34px;
        }
    </style>
}


<div id="app">
    <h2>配置项</h2>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-inline">
                <button type="button" class="btn btn-danger pull-right" @@click="showEdit(0)">添加</button>
                <div class="form-group">
                    <label>项目</label>
                    <select v-model="projectId" class="form-control">
                        <option value="">--所有项目--</option>
                        <option v-for="item in projectList" :value="item.id">{{item.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>key</label>
                    <input type="text" v-model="kw" @@keyup.enter="search" class="form-control">
                </div>
                <button type="button" class="btn btn-primary" @@click="search">搜索</button>
            </div>
        </div>
    </div>

    <table class="table table-bordered " style="margin-bottom:auto;">
        <thead>
            <tr>
                <th>编号</th>
                <th>项目</th>
                <th>环境</th>
                <th>key</th>
                <th>value</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.projectName}}</td>
                <td>{{item.environment}}</td>
                <td>{{item.key}}</td>
                <td>
                    <textarea class="form-control txtValue" placeholder="value" v-model="item.value"></textarea>
                </td>
                <td>
                    <a href="javascript:;" @@click="updateModel(item)">修改</a>
                    <a href="javascript:;" @@click="deleteModel(item)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <page :page-index.sync="pageIndex" :page-count.sync="pageCount" @@page-click="pageClick"></page>

    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="addModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">{{editTitle}}</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>项目：</label>
                            <select class="form-control" v-model="m.projectId">
                                <option v-for="item in projectList" :value="item.id">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>环境</label>
                            <input type="text" class="form-control" v-model="m.environment" placeholder="空为默认环境，dev, fat,uat, pro">
                        </div>
                        <div class="form-group">
                            <label>key</label>
                            <input type="text" class="form-control" v-model="m.key" placeholder="key">
                        </div>
                        <div class="form-group">
                            <label>value</label>
                            <textarea class="form-control " placeholder="value" v-model="m.value"></textarea>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @@click="saveModel">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>

@section scripts{
    <script src="~/js/v-page.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            components: { 'page': VPage},
            data: {
                projectId:'',
                kw: '',
                pageIndex: 1,
                pageCount:0,
                projectList:[],
                editTitle: '添加配置项',
                list:[],
                m: {
                    id: 0,
                    projectId: 0,
                    environment: '',
                    key: '',
                    value:''
                }
            },
            methods: {
                getProjectList: function () {
                    $.post('@Url.Action("ApiAllProject")', function (list) {
                        app.projectList = list;
                    });
                },
                pageClick: function (data) {
                    app.pageIndex = data;
                    app.getList();
                },
                search: function () {
                    app.pageIndex = 1;
                    app.getList();
                },
                getList: function () {
                    $.post('@Url.Action("ItemPage")', { projectId: this.projectId, kw: this.kw,page:this.pageIndex }, function (plist) {
                        app.list = plist.list;
                        app.pageCount = plist.pageCount;
                    });
                },
                showEdit: function (id) {
                        app.editTitle = "添加配置项";
                        app.m.id =0;
                        app.m.projectId = 0;
                        app.m.environment ='';
                        app.m.key = '';
                        app.m.value = '';
                        $('#addModal').modal('show');

                },
                saveModel: function () {

                    $.post('@Url.Action("AddItem")', this.m, function (ro) {
                        if (ro.success) {
                            $('#addModal').modal('hide');
                            app.getList();
                        } else {
                            alert(ro.msg);
                        }
                    });
                },
                updateModel: function (m) {
                    $.post('@Url.Action("UpdateItem")', m, function (ro) {
                        alert(ro.msg);
                    });
                },
                deleteModel: function (m) {
                    if (confirm('确定要删除吗？')) {
                        $.post('@Url.Action("DeleteItem")', { id: m.id }, function (ro) {
                            alert(ro.msg);
                            if (ro.success) {
                                app.getList();
                            }
                        });
                    }
                }
            },
            created: function () {

                this.getProjectList();
                this.getList();
            }
        });

    </script>
}